<template>
	
	<div id="map"> 
		<heade1></heade1>
		<!-- 右下角的那块功能按钮 -->
		<!--  <div><h1>123</h1></div> -->
	</div>
	<div id="distance-display"></div> <!-- 用于显示距离 -->
	
	
</template>

<script setup>
	import { onMounted } from 'vue';
	import heade1 from './heade.vue';
	import L from 'leaflet';
	import 'leaflet/dist/leaflet.css';
	import 'leaflet-routing-machine';
	import 'leaflet-routing-machine/dist/leaflet-routing-machine.css';
	import xiamenMapData from '../../assets/mapJson/xiamenMap.json';
	let map;

	// 初始化地图
	function initMap() {
		let map = L.map('map').setView([24.62063, 118.052678], 10);
		// 禁用双击缩放
		map.doubleClickZoom.disable();
		return map;
	}

	// 添加高德瓦片图层
	function addTileLayer(map) {
		L.tileLayer(
			'https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
				attribution: '© 厦门天卫科技',
				minZoom: 3,
				maxZoom: 18,
				subdomains: '1234',
			}
		).addTo(map);
	}

	


// 添加geoJson瓦片图层,就是那个圈圈
function addGeoMap(map) {
    // 添加GeoJSON图层并应用描边样式
    L.geoJSON(xiamenMapData, {
        style: () => ({
            color: '#00ffff',
            weight: 5,
            fillOpacity: 0,
			zindex:1000,
        })
    }).addTo(map);

    // 定义一个镂空的外部矩形区域，这个是外面的灰色区域
    //const outerBounds = [[23, 116], [23, 120], [26, 120], [26, 116]];

	//覆盖全球
	const outerBounds = [[-90, -180], [-90, 180], [90, 180], [90, -180]];


    // 定义镂空的区域,暂时这样，要改成直接从json文件引入数组
    const holeCoordinates = [
    [24.598508, 118.124936], [24.566656, 118.09992], [24.569189, 118.063485],
    [24.555158, 118.055955], [24.544395, 118.02923], [24.553805, 117.982242],
    [24.570498, 117.98255], [24.583833, 117.968025], [24.585666, 117.956704],
    [24.605844, 117.945387], [24.62595, 117.943594], [24.631978, 117.951552],
    [24.646403, 117.938807], [24.651289, 117.949061], [24.664625, 117.96101],
    [24.684146, 117.95963], [24.736243, 117.936091], [24.75445, 117.940632],
    [24.741139, 117.954952], [24.748191, 117.964791], [24.753901, 117.964069],
    [24.73788, 117.989329], [24.741199, 118.004416], [24.730072, 118.007848],
    [24.725159, 118.020961], [24.715961, 118.028371], [24.706183, 118.022524],
    [24.670496, 118.052047], [24.663012, 118.082441], [24.659911, 118.085967],
    [24.64564, 118.086257], [24.622166, 118.12269], [24.611746, 118.117291],
    [24.598508, 118.124936]
    ];

    // 创建镂空的多边形区域
    const hollowPolygon = L.polygon([outerBounds, holeCoordinates], {
        color: '#ff7800',
        weight: 0,
        fillColor: '#192835', // 镂空部分
        fillOpacity: 0.5,     // 半透明
    }).addTo(map);

    // 将镂空区域叠加到地图上
    map.addLayer(hollowPolygon);
}

//测试方法
function tests(map){
	console.log('这边是输出的方法')
	const coordinates = [] // 用于存放解析后的坐标数组
	 // 由于 `vite-plugin-string` 导入为字符串，所以需要将其解析为 JSON
	 	const geojsonData = JSON.parse(xiamenMapData);

		// 坐标数据在 geojsonData.features[0].geometry.coordinates 中
		coordinates.value = geojsonData.features[0].geometry.coordinates;

		console.log('输出一下获取的坐标系'+coordinates.value); // 输出坐标数组
}



	// 添加图层切换功能
	function addLayerControl(map) {
		var baseLayers = {
			'高德地图': L.tileLayer('https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
				subdomains: '1234',
				minZoom: 3,
				maxZoom: 18
			}),
			'高德卫星': L.layerGroup([
				L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
					subdomains: '1234',
					minZoom: 3,
					maxZoom: 18
				}),
				L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=cat_w&X={x}&Y={y}&Z={z}', {
					subdomains: '1234',
					minZoom: 3,
					maxZoom: 18
				})
			]),
			'leaflet官方': L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {
				foo: 'bar',
				attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
			}),
			'天地图卫星': L.tileLayer('http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=5fb6e34680b9cda61fa583c064cbc0fd', {
				minZoom: 3,
				maxZoom: 18
			}),
									//它这个是一小块的那个卫星实拍图
				'天卫栅格':L.tileLayer('http://twwechat.com:6060/202402JiMei/{z}/{x}/{y}.png', {
				minZoom: 3, // 设置最小缩放级别为3
				maxZoom: 18, //最大18层,多了不加载
				
			}),					//这个是一小块的红黄绿图
			'天卫矢量': L.tileLayer.wms('http://192.168.0.40:8123/geoserver/tw/wms', {
						layers: 'tw:HouAnErLi63',
						format: 'image/png',
						transparent: true, //设置图层的背景为透明。只有有效的雷达数据才会显示
						minZoom: 3, // 设置最小缩放级别为3
						maxZoom: 18, // 最大缩放级别为18
					}),

					// 新增图层
		'天卫交通路线': L.tileLayer.wms('http://192.168.0.40:8123/geoserver/tw/wms', {
			layers: 'tw:osmRailways',
			format: 'image/png',
			transparent: true, //设置图层的背景为透明。只有有效的雷达数据才会显示
			minZoom: 3,
			maxZoom: 18,
		}),
			
		};
		//默认图层,第一次加载就是高德
		var defaultLayer = baseLayers['高德卫星'];
		defaultLayer.addTo(map);

		L.control.layers(baseLayers, {}, { position: "topright" }).addTo(map);
	}

	// 监听缩放并显示距离
	function addZoomListener(map) {
		map.on('zoomend', () => {
			let zoom = map.getZoom();
			let center = map.getCenter();
			let scale = map.getZoomScale(zoom, 0);
			let distance = calculateDistance(center.lat, center.lng, scale);

			let displayText = distance > 100 ? (distance / 100).toFixed(2) + ' 公里' : distance.toFixed(0)*10 + ' 米';
			document.getElementById('distance-display').innerText = `距离地面：${displayText}`;
		});
	}

	// 计算距离的函数
	function calculateDistance(lat, lng, scale) {
		let earthRadius = 6371000;
		let zoomFactor = 1 / scale;
		return earthRadius * zoomFactor;
	}

		







	// 添加地图弹框，初始化加载的那个，offset 弹框向上偏移40px
	function addPopup(map) {
		L.popup({
			closeButton: true,
			closeOnClick: false,
			className: "pop-style",
			offset: [0, -40]
		}).setLatLng([24.61, 118.05])
			.setContent('<p>这里是厦门市欢迎来到<br />厦门天卫科技有限公司</p>')
			.openOn(map);
	}

	// 添加其他元素如圆形、矩形和多边形
	function addShapes(map) {
		L.circle([26.62063, 118.052678], {
			color: 'red',
			fillColor: 'red',
			fillOpacity: 0.2,
			radius: 500 * 150
		}).addTo(map);

		L.rectangle([[30.62063, 115.052678], [29.32063, 118.052678]], {
			color: 'green'
		}).addTo(map);

		L.polygon([
			[28.62063, 115.052678],
			[31.32063, 113.052678],
			[30.32063, 110.052678]
		], {
			color: 'green'
		}).addTo(map);
	}

	// 添加标记点和控制器,点击标记点后显示文字
	function addMarkers(map) {
		let markerIcon = L.icon({
			iconUrl: '../src/images/marker-icon.png',
			iconSize: [30, 50],
			iconAnchor: [15, 50]
		});
			//offset 弹框向上偏移40px
		L.marker([24.61, 118.05], { icon: markerIcon })
			.addTo(map)
			.bindPopup('<p>这里是厦门市欢迎来到<br />厦门天卫科技有限公司</p>', { offset: [0, -40] });
	}

	

	// 初始化挂载
	onMounted(() => {

		 // 在这里初始化地图
		 let map = L.map('map').setView([24.62063, 118.052678], 10);
		// 禁用双击缩放
		map.doubleClickZoom.disable();
		
		//高德地图
		addTileLayer(map);
		//切换图层
		addLayerControl(map);
		//距离显示
		addZoomListener(map);
		//地图弹框显示说明
		addPopup(map);
		//圆、矩形、多边形
		addShapes(map);
		//标记点
		addMarkers(map);
		//导入的geoJson格式
		addGeoMap(map);

// 在外部定义变量来保存标记和路线控制器
let markers = [];
		let routeControl = null;

		// 地图单击事件
		map.on('click', (e) => {
			// 如果已经有两个标记点，则清除之前的标记和路线
			if (markers.length === 2) {
				//删除两个创建的标记点
				markers.forEach(marker => map.removeLayer(marker));
				//重新给标记点赋空值
				markers = [];
				///把路线删掉
				if (routeControl) {
					map.removeControl(routeControl);
				}
			}

			// 创建新的标记点,整两个
			let marker = L.marker(e.latlng, {
				icon: L.icon({
					iconUrl: '../src/images/marker-icon.png', // 这个就是显示的标记的图片样式
					iconSize: [30, 50], // 设置标记图标大小
					iconAnchor: [15, 50], // 设置图标的锚点
				})
			}).addTo(map);
			//创建后存入list集合里面
			markers.push(marker);

			// 如果有两个标记点，则绘制路线
			if (markers.length === 2) {
				//定义起点
				let start = markers[0].getLatLng();
				//设置终点
				let end = markers[1].getLatLng();

				routeControl = L.Routing.control({
					waypoints: [start, end],
					lineOptions: { //这个是随机颜色，从下面那个方法里面去取值
						styles: [{
							color: `rgb(${random()}, ${random()}, ${random()})`,
							weight: 4
						}]
					}
				}).addTo(map);
			}
		});

		// 随机颜色生成
		function random() {

			return Math.floor(Math.random() * 255);
		}



		 // 地图单击事件
		 map.on('click', (e) => {
        // 你的点击事件逻辑
    });
	});
</script>

<style scoped>
	#map {
		width: 100%;
		height: 100vh;
		margin: 0;
		border: none;
	}


	/* 这个是显示距离的 */
#distance-display {
  position: absolute;
  top: 94vh;
  left: 48vh;
  color: #fff;
  background-color: rgba(155, 148, 148, 0.8);
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 1000;     /*把距离显示调到最前面，常驻显示. */
} 			


/* 样式穿透 */
::v-deep .leaflet-control-zoom.leaflet-bar.leaflet-control {
	width: 33px;
    top: 84vh;
    left: 196.6vh;
}
::v-deep.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
	left: -5vh;
    top: 78.7vh;
}


:deep(.leaflet-control-zoom-in) {
	display: inline-block;
	width: 43px!important;
	height: 33px!important;
	background-color: #0c3a5b;
	color: #fff;
	font-size: 100;
	
}
/* 放到最大后的样式 */
:deep(.leaflet-bar a.leaflet-disabled){
    cursor: default;
    background-color: #4e5357;
    color: #c9c7c7;

}
:deep(.leaflet-control-zoom-out){
	display: inline-block;
	width: 43px!important;
	height: 33px!important;
	background-color: #0c3a5b;
	color: #fff;
	font-size: 200;
	
}
:deep(.leaflet-control-layers-toggle ){
	width: 44px;
    height: 44px;
    background-color: #0c3a5b;
}



</style>